import React from 'react';
import { Link } from 'react-router-dom';
import { ArrowRight, Award, Compass } from 'lucide-react';
export function Home() {
  return <div className="w-full bg-earth-dark">
      {/* Hero Section */}
      <section className="relative h-screen flex items-center justify-center overflow-hidden">
        {/* Background Image with Overlay */}
        <div className="absolute inset-0 z-0">
          <img src="https://images.unsplash.com/photo-1465311530779-5241f5a29892?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2000&q=80" alt="Mountain adventure background" className="w-full h-full object-cover" />
          <div className="absolute inset-0 bg-carbon-black opacity-50"></div>
        </div>
        {/* Video as secondary layer */}
        <video autoPlay loop muted playsInline className="absolute w-full h-full object-cover opacity-60 z-10">
          <source src="https://player.vimeo.com/external/517090081.hd.mp4?s=89e33dfc40b61b3516f8641d7b3bb7d6c1b571ab&profile_id=175" type="video/mp4" />
          Your browser does not support the video tag.
        </video>
        <div className="container mx-auto px-4 relative z-20 text-center">
          <h1 className="font-display text-5xl md:text-7xl lg:text-8xl text-white mb-4 drop-shadow-lg">
            GEAR UP FOR YOUR NEXT MISSION
          </h1>
          <p className="text-xl md:text-2xl text-sand-light mb-8 max-w-3xl mx-auto drop-shadow-md">
            Unbiased, field-tested reviews for the wild places you love
          </p>
          <div className="flex flex-col sm:flex-row justify-center gap-4">
            <Link to="/guides" className="bg-outdoor-orange hover:bg-climbing-red text-white font-display px-8 py-3 text-xl rounded transition-colors">
              EXPLORE GUIDES
            </Link>
            <Link to="/community" className="border-2 border-sand-light hover:border-white text-white font-display px-8 py-3 text-xl rounded transition-colors">
              JOIN BASE CAMP
            </Link>
          </div>
        </div>
      </section>
      {/* Value Proposition */}
      <section className="py-16 bg-carbon-black">
        <div className="container mx-auto px-4">
          <h2 className="font-display text-4xl md:text-5xl text-center mb-12">
            OUR ADVENTURE PROMISE
          </h2>
          <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
            {/* Value 1 */}
            <div className="bg-earth-dark p-8 rounded-lg text-center">
              <div className="inline-flex items-center justify-center h-16 w-16 rounded-full bg-outdoor-orange mb-6">
                <Award size={32} />
              </div>
              <h3 className="font-display text-2xl mb-4">
                FIELD-TESTED TO THE EXTREME
              </h3>
              <p className="text-gray-300">
                Every piece of gear undergoes rigorous testing in real-world
                conditions. No lab simulations, just authentic adventures.
              </p>
            </div>
            {/* Value 2 */}
            <div className="bg-earth-dark p-8 rounded-lg text-center">
              <div className="inline-flex items-center justify-center h-16 w-16 rounded-full bg-forest-green mb-6">
                <Compass size={32} />
              </div>
              <h3 className="font-display text-2xl mb-4">
                BY ADVENTURERS, FOR ADVENTURERS
              </h3>
              <p className="text-gray-300">
                Our team consists of experienced outdoor enthusiasts who put
                gear through its paces in the environments it was designed for.
              </p>
            </div>
            {/* Value 3 */}
            <div className="bg-earth-dark p-8 rounded-lg text-center">
              <div className="inline-flex items-center justify-center h-16 w-16 rounded-full bg-lake-blue mb-6">
                <div size={32} />
              </div>
              <h3 className="font-display text-2xl mb-4">
                DURABILITY & PERFORMANCE DATA
              </h3>
              <p className="text-gray-300">
                Beyond subjective opinions, we provide quantifiable data on
                durability, performance, and value to help you make informed
                decisions.
              </p>
            </div>
          </div>
        </div>
      </section>
      {/* Activity Navigation */}
      <section className="py-16">
        <div className="container mx-auto px-4">
          <h2 className="font-display text-4xl md:text-5xl text-center mb-12">
            CHOOSE YOUR ADVENTURE
          </h2>
          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-5 gap-4">
            {/* Activity 1 */}
            <Link to="/activities/hiking" className="group relative h-80 overflow-hidden rounded-lg">
              <img src="https://images.unsplash.com/photo-1551632436-cbf8dd35adfa?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1000&q=80" alt="Trail & Trek" className="w-full h-full object-cover transition-transform duration-500 group-hover:scale-110" />
              <div className="absolute inset-0 bg-gradient-to-t from-carbon-black to-transparent"></div>
              <div className="absolute bottom-0 left-0 p-6">
                <h3 className="font-display text-3xl text-white mb-1">
                  TRAIL & TREK
                </h3>
                <div className="flex items-center text-outdoor-orange transition-transform duration-300 transform translate-x-0 group-hover:translate-x-2">
                  <span className="mr-1">Explore Gear</span>
                  <ArrowRight size={16} />
                </div>
              </div>
            </Link>
            {/* Activity 2 */}
            <Link to="/activities/climbing" className="group relative h-80 overflow-hidden rounded-lg">
              <img src="https://images.unsplash.com/photo-1522163182402-834f871fd851?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1000&q=80" alt="On The Rock" className="w-full h-full object-cover transition-transform duration-500 group-hover:scale-110" />
              <div className="absolute inset-0 bg-gradient-to-t from-carbon-black to-transparent"></div>
              <div className="absolute bottom-0 left-0 p-6">
                <h3 className="font-display text-3xl text-white mb-1">
                  ON THE ROCK
                </h3>
                <div className="flex items-center text-climbing-red transition-transform duration-300 transform translate-x-0 group-hover:translate-x-2">
                  <span className="mr-1">Explore Gear</span>
                  <ArrowRight size={16} />
                </div>
              </div>
            </Link>
            {/* Activity 3 */}
            <Link to="/activities/water" className="group relative h-80 overflow-hidden rounded-lg">
              <img src="https://images.unsplash.com/photo-1439066615861-d1af74d74000?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1000&q=80" alt="On The Water" className="w-full h-full object-cover transition-transform duration-500 group-hover:scale-110" />
              <div className="absolute inset-0 bg-gradient-to-t from-carbon-black to-transparent"></div>
              <div className="absolute bottom-0 left-0 p-6">
                <h3 className="font-display text-3xl text-white mb-1">
                  ON THE WATER
                </h3>
                <div className="flex items-center text-lake-blue transition-transform duration-300 transform translate-x-0 group-hover:translate-x-2">
                  <span className="mr-1">Explore Gear</span>
                  <ArrowRight size={16} />
                </div>
              </div>
            </Link>
            {/* Activity 4 */}
            <Link to="/activities/cycling" className="group relative h-80 overflow-hidden rounded-lg">
              <img src="https://images.unsplash.com/photo-1541625602330-2277a4c46182?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1000&q=80" alt="On Two Wheels" className="w-full h-full object-cover transition-transform duration-500 group-hover:scale-110" />
              <div className="absolute inset-0 bg-gradient-to-t from-carbon-black to-transparent"></div>
              <div className="absolute bottom-0 left-0 p-6">
                <h3 className="font-display text-3xl text-white mb-1">
                  ON TWO WHEELS
                </h3>
                <div className="flex items-center text-outdoor-orange transition-transform duration-300 transform translate-x-0 group-hover:translate-x-2">
                  <span className="mr-1">Explore Gear</span>
                  <ArrowRight size={16} />
                </div>
              </div>
            </Link>
            {/* Activity 5 */}
            <Link to="/activities/camping" className="group relative h-80 overflow-hidden rounded-lg">
              <img src="https://images.unsplash.com/photo-1504851149312-7a075b496cc7?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1000&q=80" alt="Camp & Survive" className="w-full h-full object-cover transition-transform duration-500 group-hover:scale-110" />
              <div className="absolute inset-0 bg-gradient-to-t from-carbon-black to-transparent"></div>
              <div className="absolute bottom-0 left-0 p-6">
                <h3 className="font-display text-3xl text-white mb-1">
                  CAMP & SURVIVE
                </h3>
                <div className="flex items-center text-forest-green transition-transform duration-300 transform translate-x-0 group-hover:translate-x-2">
                  <span className="mr-1">Explore Gear</span>
                  <ArrowRight size={16} />
                </div>
              </div>
            </Link>
          </div>
        </div>
      </section>
      {/* Featured Gear Loadout */}
      <section className="py-16 bg-carbon-black">
        <div className="container mx-auto px-4">
          <div className="flex flex-col md:flex-row justify-between items-center mb-12">
            <h2 className="font-display text-4xl md:text-5xl mb-4 md:mb-0">
              THE LOADOUT
            </h2>
            <Link to="/loadouts" className="flex items-center text-outdoor-orange hover:text-climbing-red transition-colors">
              <span className="mr-2 font-display">VIEW ALL LOADOUTS</span>
              <ArrowRight size={20} />
            </Link>
          </div>
          <div className="bg-earth-dark rounded-lg overflow-hidden">
            <div className="grid grid-cols-1 lg:grid-cols-3">
              {/* Loadout Image */}
              <div className="relative h-80 lg:h-auto lg:col-span-1">
                <img src="https://images.unsplash.com/photo-1627163439134-7a8c47e08208?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1000&q=80" alt="24-Hour Lightweight Trek Loadout" className="w-full h-full object-cover" />
                <div className="absolute top-0 left-0 bg-outdoor-orange px-4 py-2 font-display">
                  FEATURED LOADOUT
                </div>
              </div>
              {/* Loadout Content */}
              <div className="p-8 lg:col-span-2">
                <h3 className="font-display text-3xl mb-4">
                  24-HOUR LIGHTWEIGHT TREK LOADOUT
                </h3>
                <p className="text-gray-300 mb-6">
                  Everything you need for a fast and light 24-hour adventure in
                  the mountains. This carefully curated gear selection balances
                  weight, functionality, and durability for optimal performance.
                </p>
                <div className="grid grid-cols-1 md:grid-cols-2 gap-6 mb-8">
                  {/* Gear Item 1 */}
                  <div className="flex">
                    <img src="https://images.unsplash.com/photo-1602156498253-ad0c84c1d008?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=100&h=100&q=80" alt="Osprey Talon 22 Backpack" className="h-16 w-16 object-cover rounded mr-4" />
                    <div>
                      <h4 className="font-bold mb-1">
                        Osprey Talon 22 Backpack
                      </h4>
                      <div className="flex items-center">
                        <span className="text-outdoor-orange font-display mr-2">
                          ★★★★★
                        </span>
                        <span className="text-sm text-gray-400">920g</span>
                      </div>
                    </div>
                  </div>
                  {/* Gear Item 2 */}
                  <div className="flex">
                    <img src="https://images.unsplash.com/photo-1542124292-60272943bc2e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=100&h=100&q=80" alt="Salomon X Ultra 4 GTX" className="h-16 w-16 object-cover rounded mr-4" />
                    <div>
                      <h4 className="font-bold mb-1">Salomon X Ultra 4 GTX</h4>
                      <div className="flex items-center">
                        <span className="text-outdoor-orange font-display mr-2">
                          ★★★★☆
                        </span>
                        <span className="text-sm text-gray-400">350g/shoe</span>
                      </div>
                    </div>
                  </div>
                  {/* Gear Item 3 */}
                  <div className="flex">
                    <img src="https://images.unsplash.com/photo-1510518119802-a9d716810de2?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=100&h=100&q=80" alt="Black Diamond Distance Z Trekking Poles" className="h-16 w-16 object-cover rounded mr-4" />
                    <div>
                      <h4 className="font-bold mb-1">BD Distance Z Poles</h4>
                      <div className="flex items-center">
                        <span className="text-outdoor-orange font-display mr-2">
                          ★★★★★
                        </span>
                        <span className="text-sm text-gray-400">340g/pair</span>
                      </div>
                    </div>
                  </div>
                  {/* Gear Item 4 */}
                  <div className="flex">
                    <img src="https://images.unsplash.com/photo-1478826160983-e6db8c7d537a?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=100&h=100&q=80" alt="Patagonia Nano Puff Jacket" className="h-16 w-16 object-cover rounded mr-4" />
                    <div>
                      <h4 className="font-bold mb-1">Patagonia Nano Puff</h4>
                      <div className="flex items-center">
                        <span className="text-outdoor-orange font-display mr-2">
                          ★★★★☆
                        </span>
                        <span className="text-sm text-gray-400">286g</span>
                      </div>
                    </div>
                  </div>
                </div>
                <Link to="/loadouts/24-hour-trek" className="bg-outdoor-orange hover:bg-climbing-red text-white font-display px-6 py-3 inline-flex items-center rounded transition-colors">
                  VIEW FULL LOADOUT
                  <ArrowRight size={16} className="ml-2" />
                </Link>
              </div>
            </div>
          </div>
        </div>
      </section>
      {/* Expedition Reports */}
      <section className="py-16">
        <div className="container mx-auto px-4">
          <div className="flex flex-col md:flex-row justify-between items-center mb-12">
            <h2 className="font-display text-4xl md:text-5xl mb-4 md:mb-0">
              LATEST EXPEDITION REPORTS
            </h2>
            <Link to="/reports" className="flex items-center text-outdoor-orange hover:text-climbing-red transition-colors">
              <span className="mr-2 font-display">VIEW ALL REPORTS</span>
              <ArrowRight size={20} />
            </Link>
          </div>
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
            {/* Report 1 */}
            <Link to="/review/arc-teryx-beta-ar" className="group">
              <div className="relative h-64 overflow-hidden rounded-t-lg">
                <img src="https://images.unsplash.com/photo-1608235375712-be654ace4420?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=700&q=80" alt="Arc'teryx Beta AR Jacket" className="w-full h-full object-cover transition-transform duration-500 group-hover:scale-110" />
                <div className="absolute top-0 left-0 bg-climbing-red px-4 py-2 font-display">
                  SHELL JACKETS
                </div>
              </div>
              <div className="bg-earth-dark p-6 rounded-b-lg">
                <div className="flex items-center mb-2">
                  <span className="text-outdoor-orange font-display mr-2">
                    ★★★★★
                  </span>
                  <span className="text-gray-400">5 days ago</span>
                </div>
                <h3 className="font-display text-2xl mb-2 group-hover:text-outdoor-orange transition-colors">
                  ARC'TERYX BETA AR JACKET
                </h3>
                <p className="text-gray-300 line-clamp-2">
                  Tested through torrential downpours in the Pacific Northwest,
                  this premium shell delivers bombproof protection for serious
                  alpine adventures.
                </p>
              </div>
            </Link>
            {/* Report 2 */}
            <Link to="/review/la-sportiva-ultra-raptor-2" className="group">
              <div className="relative h-64 overflow-hidden rounded-t-lg">
                <img src="https://images.unsplash.com/photo-1465479423260-c4afc24172c6?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=700&q=80" alt="La Sportiva Ultra Raptor II" className="w-full h-full object-cover transition-transform duration-500 group-hover:scale-110" />
                <div className="absolute top-0 left-0 bg-forest-green px-4 py-2 font-display">
                  TRAIL RUNNING
                </div>
              </div>
              <div className="bg-earth-dark p-6 rounded-b-lg">
                <div className="flex items-center mb-2">
                  <span className="text-outdoor-orange font-display mr-2">
                    ★★★★☆
                  </span>
                  <span className="text-gray-400">2 weeks ago</span>
                </div>
                <h3 className="font-display text-2xl mb-2 group-hover:text-outdoor-orange transition-colors">
                  LA SPORTIVA ULTRA RAPTOR II
                </h3>
                <p className="text-gray-300 line-clamp-2">
                  After 500 kilometers of technical alpine trails, these rugged
                  trail runners proved their worth on rocky, muddy, and steep
                  terrain.
                </p>
              </div>
            </Link>
            {/* Report 3 */}
            <Link to="/review/black-diamond-momentum-harness" className="group">
              <div className="relative h-64 overflow-hidden rounded-t-lg">
                <img src="https://images.unsplash.com/photo-1522163182402-834f871fd851?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=700&q=80" alt="Black Diamond Momentum Harness" className="w-full h-full object-cover transition-transform duration-500 group-hover:scale-110" />
                <div className="absolute top-0 left-0 bg-lake-blue px-4 py-2 font-display">
                  CLIMBING GEAR
                </div>
              </div>
              <div className="bg-earth-dark p-6 rounded-b-lg">
                <div className="flex items-center mb-2">
                  <span className="text-outdoor-orange font-display mr-2">
                    ★★★★☆
                  </span>
                  <span className="text-gray-400">1 month ago</span>
                </div>
                <h3 className="font-display text-2xl mb-2 group-hover:text-outdoor-orange transition-colors">
                  BLACK DIAMOND MOMENTUM HARNESS
                </h3>
                <p className="text-gray-300 line-clamp-2">
                  An entry-level workhorse put to the test across multiple
                  climbing disciplines, from gym sessions to multi-pitch trad
                  routes.
                </p>
              </div>
            </Link>
          </div>
        </div>
      </section>
    </div>;
}